<script setup>
import { ref } from 'vue'
const currentDate = ref(new Date())
</script>

<template>
  <page-view>

    <div class="title">Tree树形控件</div>
    <el-tree
        ref="myTree"
        :data="treeConfig.data"
        :props="treeConfig.props"
        :default-checked-keys="treeConfig.defaultCheckedKeys"
        node-key="id"
        show-checkbox
        @node-click="handleNodeClick"
        @check="checkBoxClick"
    />
    <el-divider></el-divider>
    <div>margin塌陷问题:相邻块元素垂直外边距塌陷：当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）</div>
    <div style="margin-bottom: 20px">垂直方向行级元素1:margin-bottom: 20px</div>
    <div style="margin-top: 30px">垂直方向行级元素2:margin-top: 30px</div>
    <div>尽量避免给同一个方向的相邻元素都设置外边距，可以只给其中一个元素设置外边距</div>
    
    <el-divider></el-divider>
    <div>a=0.1,b=0.2,为什么a+b不等于0.3</div>
    <div>回答：在JavaScript中，a = 0.1; b = 0.2; a + b 的结果并不精确地等于 0.3 是因为浮点数的表示和运算在计算机中并不是完全精确的。这是由于计算机内部使用二进制来表示数字，而某些十进制小数在二进制表示中是无限循环的，因此会有舍入误差。可以先将数据乘以10的多少次方转化为整数进行计算，再除以相同的数转化为真实结果</div>

    <el-divider></el-divider>
    <div>什么是CSRF?</div>
    <div>CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种常见的网络攻击手段。攻击者利用用户已经在其他网站登录的身份，通过构造恶意链接或页面，诱使用户在不知情的情况下进行非预期的操作，如修改密码、转账、发表评论等。由于这些操作是在用户已经登录的状态下进行的，因此攻击者可以绕过身份验证机制，实施攻击。
      为了防止CSRF攻击，网站可以采取一些措施，如使用随机令牌（CSRF Token）来验证请求的合法性，要求用户输入额外的身份验证信息等
    </div>

    <div class="title">栅栏布局-卡片</div>
    <el-row style="padding: 10px" :gutter="10">
      <el-col
          v-for="(item, index) in cardConfig.data"
          :key="index"
          :span="cardConfig.span"
      >
        <el-card @click="cardClick" class="card">
          <img
              :src="item.image"
              class="image"
          />
          <div style="padding: 14px">
            <span>名称</span>
            <div class="bottom">
              <div class="time">{{ item.date }}</div>
              <img class="like-icon" :src="item.icon">
<!--              <el-button @click.stop="startBtnClickd(index)" plain class="button">点赞</el-button>-->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </page-view>

</template>

<script>
import {getNowTimeStrWithFormatter, getTimeWithFormatter} from "@/utils/util";
import likeIcon1 from '@/assets/like_n.png'
import likeIcon2 from '@/assets/like_s.png'

export default {
  name: "Workdemo",
  components: {},
  props:{

  },
  data() {
    return {
      // 节点对应的key和value属性字段
      treeConfig:{
        // 节点读取的key和value值
        props:{
          // 节点名称
          label: 'label',
          // 节点的子节点数据
          children: 'children',
          // 节点是否被禁用
          disabled:'disabled',
        },
        // 默认勾选的节点key数组
        defaultCheckedKeys:['1-0', '1-1'],
        // 树形结构数据源 数据之间要体现层级数据（让父级和子级唯一标记id之间形成关系 便于在最终提交数据时分离数据）
        data:[
          {
            label: '水果',
            // 每个节点的唯一标记 id
            id:'0',
            children: [
              {
                label: '西瓜',
                id:'0-0',
                children: [
                  {
                    label: '麒麟瓜',
                    id:'0-0-0',
                  },
                ],
              },
            ],
          },
          {
            label: '体育',
            id:'1',
            children: [
              {
                label: '田径',
                children: [
                  {
                    label: '100米',
                    id:'1-0',
                    disabled:true,
                  },
                ],
              },
              {
                label: '乒乓',
                id:'1-1',
                children: [
                  {
                    label: '男子单打',
                    id:'1-1-1',
                  },
                ],
              },
            ],
          },
          {
            label: '游戏',
            id:'2',
            children: [
              {
                label: 'LOL',
                id:'2-0',
                children: [
                  {
                    label: '英雄联盟PC',
                    id:'2-0-1',
                  },
                ],
              },
              {
                label: 'DNF',
                id:'2-1',
                children: [
                  {
                    label: '地下城PC',
                    id:'2-1-1',
                  },
                ],
              },
            ],
          },
        ]
      },

      // 卡片配置数据：适用于卡片高度一致
      cardConfig:{
        // 数据源
        data:[],
        // 列间隔
        gutter:10,

        // 多少列
        totalColum:6,
        // 每列占据的份额
        span:4,
      }
    }
  },
  beforeCreate() {

  },
  created() {

    let a = 0.1
    let b = 0.2
    let c = a + b
    console.log('a+b=', c)
    if (a + b == 0.3) {
      console.log('0.3')
    }

    this.uploadDataReq();
  },
  mounted() {

  },
  methods:{
    uploadDataReq() {
      let cardDatas = []
      let date = getNowTimeStrWithFormatter()
      for (let i= 0; i < 7; i += 1) {
        let cardObj = {
          title:'卡片名称',
          date,
          image:"https://img0.baidu.com/it/u=3049998987,1866756846&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500",
          icon:likeIcon2,
        }
        cardDatas.push(cardObj);
      }
      this.cardConfig.data = cardDatas;
    },

    handleNodeClick(data) {
      console.log(data)
      let a = this.$refs['myTree'].getCurrentNode()
      console.log('a:', a)
    },

    /**
     * 点击节点复选框之后触发
     * @param var1 传递给 data 属性的数组中该节点所对应的对象（当前点击选择的节点数据）
     * @param var2  checkedNodes当前已经选中的所有节点及其下的数据
     * checkedKeys当前已经选中的所有节点id(包含父节点以及子节点id 让节点id之间有层级关系递进 就非常好处理了)
     * halfCheckedNodes所有未全选半选的节点及其下数据
     * halfCheckedKeys所有半选的节点key
     */
    checkBoxClick(var1, var2) {
      console.log('var1:', var1)
      console.log('var2:', var2)
    },

    /**
     * 卡片点击事件
     */
    cardClick() {
      this.$router.push({ path:'/workdemo/detail', query:{name:'张三'} })
    },

    /**
     * 点赞按钮点击事件
     */
    startBtnClickd(index) {
      console.log('点赞:', index)
    }
  },
}
</script>

<style lang="scss" scoped>

@import "@/assets/styles/public.scss";

.title {
  font-size: 16px;
  padding: 10px;
}

.text-item {
  white-space: normal;
  word-break: break-word;
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  margin-left: 5px;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}

.card {
  // 使得放大效果更加平滑
  transition: transform 0.3s ease-in-out;
  margin-bottom: 10px;

  .like-icon {
    width: 28px;
    height: 26px;
  }
}


.card:hover {
  // 鼠标放上去 放大到原始大小的1.1倍
  transform: scale(1.02, 1.02);
  //margin-top: -5px;
  border-color: $danger-color;
}
</style>
